"use client"
import React, {use, useState} from 'react';
import Link from 'next/link'
import { Select, Space } from 'antd';
import { Button, Flex } from 'antd';
import { Input } from 'antd';
const { TextArea } = Input;
import { Tabs } from 'antd';
import { Table, Tag } from 'antd';
import '@ant-design/v5-patch-for-react-19';
import {handleHardNavError} from "next/dist/client/components/nav-failure-handler";

export default function Home() {
    const [requestType,setRequestType]=useState("GET");
    console.log(requestType);
    const [fetchURL,setFetchURL]=useState("");
    console.log(fetchURL);
    const [responseData, setResponseData]=useState("");
    console.log(responseData);
    const [contentHeaders,setContentHeaders]=useState("");
    console.log(contentHeaders);
    const [contentBody,setContentBody]=useState("");
    console.log(contentBody);
    const [responseStatus,setResponseStatus]=useState("");
    console.log(responseStatus);
    const [apiName,setApiName]=useState("");
    console.log(apiName);
    const [listData, setListData]=useState([{
        key: 1,
        name: '初始化显示测试数据',
        status: 200,
        URL: 'New York No. 1 Lake Park',
    }]);

    const handleSaveAPIdata=()=>{
        if(apiName!=="" && responseStatus!=="" && fetchURL!==""){
            setListData([...listData,{
                key: 2,
                name:apiName,
                status:responseStatus,
                URL:fetchURL,
            }]);
        }else {
            alert("请检查数据是否为空？")
        }
    }

    const handleNameChange=(e)=>{
        setApiName(e.target.value);
    }

    const handleHeadersChange=(e)=>{
        setContentHeaders(e.target.value)
    }

    const handleBodyChange=(e)=>{
        setContentBody(e.target.value)
    }

    const handleURLChange=(e)=>{
        setFetchURL(e.target.value);
    }
    const handleChange = (value) => {
        console.log(`selected ${value}`);
        setRequestType(value)
        setResponseData("")
    };

    const handleClick =async () => {
        console.log('primary button click');
        if (requestType ==="GET"){
            let response = await fetch(fetchURL);
            let posts = await response.text()
            setResponseData(posts);
            setResponseStatus(response.status)
        }else{
            let response = await fetch(fetchURL, {
                method: 'POST',
                headers: JSON.parse(contentHeaders),
                body: JSON.stringify(contentBody)
            });
            let posts = await response.text()
            setResponseData(posts);
            setResponseStatus(response.status)
        }

    }

    const items = [
        {
            key: '1',
            label: 'Headers',
            children: <TextArea rows={4} placeholder="Headers" onChange={handleHeadersChange}/>,
        },
        {
            key: '2',
            label: 'Body',
            children:  <TextArea rows={4} placeholder="JSON" onChange={handleBodyChange}/>,
        },
    ];

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'status',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: 'URL',
            dataIndex: 'URL',
            key: 'URL',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    {/*<a>Invite {record.name}</a>*/}
                    <a>Delete</a>
                </Space>
            ),
        },
    ];

    return (
   <>
       <Link href="/route1"><h2 >点击跳转至监控接口列表</h2></Link>

       <div>接口名称：<Input placeholder="接口名称" onChange={handleNameChange} /></div>
       <Space wrap>
           <Select
               defaultValue="GET"
               style={{
                   width: 120,
               }}
               onChange={handleChange}
               options={[
                   {
                       value: 'GET',
                       label: 'GET',
                   },
                   {
                       value: 'POST',
                       label: 'POST',
                   },
               ]}
           />
       </Space>
       <Input placeholder="URL" onChange={handleURLChange} />
       <Tabs defaultActiveKey="1" items={items} />
       <div>响应状态：{responseStatus}</div>
       <TextArea rows={4} value={responseData} readOnly placeholder="响应内容"/>
       <Flex gap="small" wrap>
           <Button onClick={handleSaveAPIdata}>保存至当前列表</Button>
           <Button type="primary" onClick={handleClick}>Send</Button>
       </Flex>
       <Table columns={columns} dataSource={listData}   />
   </>
  );
}

// const data = [
//     {
//         key: '1',
//         name: 'John Brown',
//         status: 32,
//         URL: 'New York No. 1 Lake Park',
//     }
// ];


